<template>
    <view class="components-upload">
        <van-uploader :file-list="img_list" :multiple="multiple" :max-count="maxCount" :max-size="maxSize" :accept="accept" :preview-full-image="isPreview" @oversize="showWarning" @after-read="uploadFile" @delete="deleteFile" />
    </view>
</template>
<script>
import {api_url,tenant_id} from '@/static/js/config';
    export default {
        props:{
            multiple: { // 是否多个上传，默认只上传一个
                type: Boolean,
                default: () => false,
            },
            maxCount: { // 限制上传数量
                type: Number,
                default: () => 1000,
            },
            maxSize: {
                type: Number,
                default: () => 200*1024 // 单位b
            },
            isPreview: {
                type: Boolean,
                default: () => true
            },
            accept: {
                type: String,
                default: () => 'image',
            },
            imgList:{
                type: Array,
                default: () => [],
            },
            action:{
                type: String,
                default: () => '/admin/file/upload'
            },
            resType: {
                type: String,
                default: () => '1111'
            }
        },
        data(){
            return{
                // imgList: null,
            }
        },
        computed:{
            img_list(){
                return this.imgList;
            }
        },
        methods: {
            showWarning(){
                uni.showToast({title: '文件大小不能超过' + this.maxSize / 1024 + 'kb', icon: 'none'});
            },
            uploadFile(e) {
                if(this.multiple && this.imgList.length == this.max){
                    uni.showToast({title: '只能上传'+this.max + '张图片', icon: 'none'});
                    return;
                };
                const { file } = e.detail;
                // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
                if(Array.isArray(file)){
                    file.forEach(item => {
                        this.handleUpload(item);
                    })
                }else{
                    this.handleUpload(file);
                }
                
            },
            handleUpload(file){
                uni.showLoading({title: '上传中...'});
                uni.uploadFile({
                    url: api_url + this.action,
                    filePath: file.url,
                    name: 'file',
                    header: {
                        "Authorization": 'Bearer ' +this.$store.state.access_token,//uni.getStorageSync('access_token')
                        'TENANT-ID': tenant_id
                    },
                    formData: { resType: this.resType },
                    success: res => {
                        let {code, data} = JSON.parse(res.data);
                        console.log(data);
                        if(code == 0 || code == 200){
                            this.img_list.push({name: data.fileName, url:file.url});
                            this.$emit('update:imgList', this.img_list);
                        }else{
                        uni.showToast({title: '上传失败！'});
                        }
                    },
                    fail: err => {
                        uni.showToast({title: '上传失败！'});
                    },
                    complete: ()=>{
                        uni.hideLoading()
                    }
                });
                this.$emit('upload', file);
            },
            deleteFile(e){
                this.img_list.splice(e.detail.index, 1);
                this.$emit('update:imgList', this.img_list);
            }
        }
    }
</script>